<template>
  <div class="play">
    <question-search-button></question-search-button>
    <div class="menu" @click="showClick">
      <i class="iconfont icon-icon-test8"></i>
    </div>
    <!-- tabs标签栏 -->
    <van-tabs v-model="channel_id" animated>
      <van-tab
        v-for="(item, index) in myList"
        :title="item.text"
        :name="item.id"
        :key="index"
      >
        {{ item.text }}
      </van-tab>
    </van-tabs>
    <!-- 频道弹框 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '85%' }">
      <div class="content">
        <div class="title">
          <div class="left">我的频道</div>
          <div class="right" v-if="!flag" @click="flag = !flag">编辑</div>
          <div class="right" v-else @click="flag = !flag">完成</div>
        </div>
        <ul class="myList">
          <li
            @click="reduce(index2, ele.id)"
            v-for="(ele, index2) in myList"
            :key="index2"
          >
            {{ ele.text }}
            <i
              v-show="flag"
              v-if="index2 !== 0"
              class="iconfont icon-icon-test10 active"
              @click="del(index2, ele.id)"
            ></i>
          </li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
        </ul>
        <div class="recommend">
          频道推荐
        </div>
        <ul class="rmList">
          <li
            @click="addClick(index)"
            v-for="(item, index) in rmList"
            :key="index"
          >
            {{ item.text }}
            <!-- <i class="iconfont icon-tianjia"></i> -->
          </li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
          <li class="a"></li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import navList from '@/api/video.js'
import QuestionSearchButton from '@/components/QuestionSearchButton.vue'
export default {
  name: 'play',
  components: {
    QuestionSearchButton
  },
  data () {
    return {
      channel_id: 0,
      myList: navList.myChannelList, // 用户频道列表
      rmList: navList.navList, // 推荐频道列表
      loading: false, // 上拉加载中
      isLoading: false, // 下拉加载
      finished: false, // 上拉加载完成
      listText: [], // 文章列表
      page: 1, // 总页数
      show: false, // 显示弹框
      flag: false
    }
  },
  methods: {
    // 显示弹框
    showClick () {
      this.show = true
    },
    // 点击用户频道
    reduce (index, id) {
      if (!this.flag) {
        this.red = index
        this.onRefresh(id)
        this.show = false
      }
    }
  },
  mounted () {
    console.log(this.navList)
  }
}
</script>

<style lang="less" scoped>
.play {
  .menu {
    z-index: 1;
    position: absolute;
    top: 55px;
    right: 0;
    background-color: #fff;
    i {
      color: #ccc;
      font-size: 30px;
    }
  }
  .van-tabs {
    ::v-deep.van-tabs__wrap {
      margin-right: 30px;
    }
    ::v-deep.van-tab__pane {
      padding: 20px 15px;
    }
  }
  .content {
    padding: 15px;
    height: 100%;
    .title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      border-bottom: 1px solid #ccc;
      text-align: center;
      font-size: 16px;
      .left {
        padding-top: 6px;
      }
      .right {
        height: 25px;
        width: 55px;
        font-size: 12px;
        text-align: center;
        // line-height: 25px;
        padding-top: 4px;
        border: 2px solid #ee1830;
        border-radius: 20px;
        color: #ee1830;
      }
    }
    .myList {
      display: flex;
      padding-top: 15px;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #e1e3e6;
        color: #666;
        font-size: 12px;
        margin-bottom: 6px;
        .active {
          position: absolute;
          font-size: 5px;
          font-weight: 900;
          top: -14px;
          right: -1px;
          color: red;
        }
      }
      .red {
        color: red;
      }
      .a {
        height: 0;
        border: none;
      }
    }
    .recommend {
      font-size: 16px;
      padding: 20px 0;
    }
    .rmList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #e1e3e6;
        color: #666;
        font-size: 12px;
        margin-bottom: 6px;
        // i {
        //   position: absolute;
        //   font-size: 5px;
        //   font-weight: 900;
        //   top: -14px;
        //   right: -1px;
        //   color: #3296fa;
        // }
      }
      .a {
        height: 0;
        border: none;
      }
    }
  }
}
</style>
